<script setup>
import {fairyDustCursor} from '@/utils/mouse/TuoWei.js'
import {clickTwo} from "@/utils/mouse/click-2.js";
import {clickEffect} from "@/utils/mouse/click-1.js";
import {ref, watch, onMounted, onUnmounted} from 'vue';
import {formatDate} from "@/utils/utils.js";
import {useRouter} from "vue-router";

let value = ref([])
const indeterminate = ref(false)
const checkAll = ref(true)
const initials = ['拖尾', '点击1', '点击2',]
let time = ref()
let timeInterval = null

const router=useRouter()
const onclick=()=>{
  router.push({ path: '/home/EE' }).then(() => location.reload())
}
onMounted(() => {
  timeInterval = setInterval(() => {
    time.value = formatDate(new Date())
  })
})
onUnmounted(() => {
  clearInterval(timeInterval);
});
const reload = () => {
  location.reload()
}
const options = ref(
    Array.from({length: initials.length}).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${initials[idx]} 特效`,
    }))
)
const change = (e) => {
  value.value = e
}
const handleCheckAll = (val) => {
  indeterminate.value = false
  if (val) {
    value.value = options.value.map((_) => _.value)
  } else {
    value.value = []
  }
}
watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === options.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
  if (Object.values(val).includes('1')) {
    fairyDustCursor()
  }
  if (Object.values(val).includes('2')) {
    clickEffect()
  }
  if (Object.values(val).includes('3')) {
    clickTwo()
  }
}, {immediate: true})


</script>

<template>
  <div>
    <span class="js-cursor-container"></span>
    <el-row class="white Bgreen Ycenter" style="height:40px;z-index: 999">
      <el-col :span="12">
        <el-col :span="6" class="Xground">
          <router-link to="/home/AA" class="noDecoration mouseOver">
            <span class="white">AA</span>
          </router-link>
          <router-link to="/home/BB" class="noDecoration mouseOver">
            <span class="white">BB</span>
          </router-link>
          <router-link to="/home/CC" class="noDecoration mouseOver">
            <span class="white">CC</span>
          </router-link>
          <router-link to="/home/DD" class="noDecoration mouseOver">
            <span class="white">DD</span>
          </router-link>
          <div @click="onclick" class="noDecoration mouseOver" style="cursor: pointer">
            <span class="white">EE</span>
          </div>
          <router-link to="/home/FF" class="noDecoration mouseOver">
            <span class="white">FF</span>
          </router-link>
<!--          <router-link to="/home/EE" class="noDecoration mouseOver">-->
<!--            <span class="white">EE</span>-->
<!--          </router-link>-->
        </el-col>
      </el-col>
      <el-col :span="12" class="Xend Ycenter">
        <el-col :span="12">
          <span>当前时间：{{ time }}</span>
        </el-col>
        <el-col :span="12" class="Xend Ycenter">
          <el-select-v2
              v-model="value"
              :options="options"
              placeholder="鼠标特效"
              style="width: 240px"
              multiple
              @change="change"
              collapse-tags
          >
            <template #header>
              <el-checkbox
                  v-model="checkAll"
                  :indeterminate="indeterminate"
                  @change="handleCheckAll"
              >
                All
              </el-checkbox>
            </template>
          </el-select-v2>
          <span @click="reload">清除特效</span>
        </el-col>
      </el-col>
    </el-row>


    <router-view></router-view>
  </div>
</template>

<style scoped>
.mouseOver {
  display: inline-block;
  height:40px;
  line-height: 40px;
  width: 60px;
  text-align: center;
}

.mouseOver:hover {
  background-color: #748c43;
}

</style>